<template>
  <div>
    <nav-bar>
      订单预览
    </nav-bar>
    <div style="margin-top: 45px">
      <div class="order">
        <div class="order-header" style="height:50px;margin:60px 10px 0">
          <div style="float: left">
            <span>{{ nameAndPrice() || '' }}</span>
            <p style="margin-top:10px;font-size: 14px">{{
              (address.province + address.city + address.county + address.address) || '' }}</p>
          </div>
          <div style="float:right;padding-top:18px">
            <van-icon name="arrow" />
          </div>
        </div>
        <div>
          <img width="340" height="50" src="../../../assets/img/fenge.png" style="margin-top: 10px;margin-left:10px" />
        </div>
        <div class="order-footer">
          <van-card style="background-color: white" :num="item.num" :price="item.goods.price + '.00'" desc="暂无描述"
            :title="item.goods.title" :thumb="item.goods.cover_url" v-for="item in cartList" :key="item.id" />
        </div>
      </div>
      <van-submit-bar :price="Number(totalPrice) * 100" button-text="生成订单" @submit="onSubmit">
        <view slot="left">商品金额</view>
      </van-submit-bar>
    </div>
    <!--      closeable用来添加关闭按钮的-->
    <van-popup :show="isShow" position="bottom" :overlay="true" @close="onClose" close-on-click-overlay>
      <van-grid :border="false" :column-num="2" style="margin-top: 20px">
        <van-grid-item style="float:left;">
          支付宝二维码
          <van-image :src="aliyun" width="150px" height="187px" />
        </van-grid-item>
        <van-grid-item style="float:left;">
          微信二维码
          <van-image :src="wechat" width="150px" height="187px" />
        </van-grid-item>
      </van-grid>
    </van-popup>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
import { useStore } from 'vuex'
import { Toast } from 'vant'
import { useRouter } from 'vue-router'
export default {
  name: "createOrder",
  setup() {
    const isShow = ref(false)
    const router = useRouter()
    let state = reactive({
      address: {},
      cartList: [],
      orderNo: '',
      aliyun: '',
      wechat: ''
    })
    const { proxy } = getCurrentInstance()
    const store = useStore()
    const onSubmit = () => {
      isShow.value = true
      const params = {
        address_id: state.address.id
      }
      proxy.$API.order.createOrder(params).then(res => {
        store.dispatch('updateCart')
        state.orderNo = res.id
        proxy.$API.order.payOrder(state.orderNo, { type: 'aliyun' }).then(res => {
          state.aliyun = res.qr_code_url
          state.wechat = res.qr_code_url
        })
        const timer = setInterval(() => {
          proxy.$API.order.parOrderStatus(state.orderNo).then(res => {
            if (res == '1') {
              clearInterval(timer)
              Toast('支付成功!')
              router.push({ path: '/orderDetail', query: { id: state.orderNo } })
            }
          })
        }, 3000)
      })
    }
    const onClose = () => {
      isShow.value = false
    }
    const nameAndPrice = () => (state.address.name + ' ' + state.address.phone) || ''
    const totalPrice = computed(() => {
      return state.cartList.reduce((pre, current) => {
        return (pre + current.goods.price)
      }, 0) + '.00'
    })
    const init = () => {
      Toast({ message: '正在加载中', forbidClick: true })
      proxy.$API.order.getOrderPreview().then(res => {
        state.cartList = res.carts
        let address = res.address.filter(item => item.is_default == '1')
        state.address = address[0]
        if (state.address.length == 0) {
          state.address = { address: '请选择或添加地址' }
        }
      })
    }
    onMounted(() => {
      init()
    })
    return {
      onSubmit,
      ...toRefs(state),
      totalPrice,
      nameAndPrice,
      isShow,
      onClose
    }
  }
}
</script>

<style scoped>
::v-deep .van-submit-bar {
  position: fixed;
  bottom: 50px;
  background-color: #f0f0f0;
}

::v-deep .van-card__price {
  color: red;
}

::v-deep .van-card__num {
  font-size: 16px;
}

::v-deep .van-icon {
  font-size: 20px;
}
</style>
